<template>
  <div>
    <a-divider orientation="left">基础信息
      
    </a-divider>
    <a @click="showDrawer" style="margin-left: 85%;">打捞详情</a>
    <DetailDrawer :solutionDetail="props.solutionDetail" ref="dataDrawerRef"></DetailDrawer>
    <div>
      <a-descriptions bordered :column="4" size="middle">
        <a-descriptions-item label="井号" :span="4">{{ props.solutionDetail?.wellId || "---" }}</a-descriptions-item>
        <a-descriptions-item label="井别" :span="2">{{ props.solutionDetail?.wellCategory || "---" }}</a-descriptions-item>
        <a-descriptions-item label="井型" :span="2">{{ props.solutionDetail?.wellType || "---" }}</a-descriptions-item>
        <a-descriptions-item label="地理位置" :span="4">{{ props.solutionDetail?.wellLocation || "---" }}</a-descriptions-item>
      </a-descriptions>
      <a-divider orientation="left">打捞筒推荐</a-divider>
      <Tube :salvageTube="props.solutionDetail?.salvageTube"></Tube>
    </div>
  </div>
</template>
<script setup>
import DetailDrawer from '../drawer/DetailDrawer.vue';
import Tube from './Tube.vue';
const props = defineProps({
  reportId: {
    type: String,
  },
  solutionDetail: {
    type: Object,
  },
});
const form = ref({});
const dataDrawerRef = ref(null);

// 监听数据变化
// watch(() => props.solutionDetail, (newV) => {
//   console.log("props.solutionDetail", newV);
//   getSolution();
// }, { deep: true });

// 获取施工方案信息
// function getSolution() {
//   form.value = props.solutionDetail
//   console.log("form.value", form.value);
// }
// getSolution();

function showDrawer() {
  dataDrawerRef.value.openDrawer();
}
</script>
